<template>
  <div class="alter w-200px rounded text-sm text-center text-light-50 p-10px box-border"
       :class="[typeStyle]"
       v-if="active">
    {{ message }}
  </div>
</template>

<script setup lang="ts">
import {toRefs} from "vue";

interface Props {
  message: string
  active: boolean
  type?: "primary" | "warning" | "error"
}

const TYPE_STYLE = {
  primary: "bg-blue-300",
  warning: "bg-orange-300",
  error: "bg-red-300"
}

const rawProps = withDefaults(defineProps<Props>(), {
  type: "primary"
})
const {active, message, type} = toRefs(rawProps)
const typeStyle = computed(() => {
  switch (type.value) {
    case "primary":
      return TYPE_STYLE.primary
    case "warning":
      return TYPE_STYLE.warning
    case "error":
      return TYPE_STYLE.error
  }
})
</script>

<style scoped>
.alter {
  position: fixed;
  left: 50%;
  top: 100px;
  z-index: 999;
  transform: translate(-50%, 0);
  animation: move 0.3s linear;
}

@keyframes move {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}
</style>